import { defineComponent } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import { Grid, GridItem } from "vant";
import * as vant from "vant";
const { showFailToast, showSuccessToast } = vant;
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { getSize } from "@/command/apiTool";
import { useRequest } from "./request";
import TitleView from "@/components/TitleView";
import TextView from "@/components/TextView";
import TextGroups from "@/components/TextGroups";
import CardMore from "@/components/CardMore";
import { useRoute, useRouter } from "vue-router";
import ButtonView from "@/components/ButtonView";
import PopTitle from "@/components/PopTitle";
import PopupCheck from "@/components/PopupCheck";
import { isDh } from "@/command/apiTool";
export default defineComponent({
  name: "",
  setup() {
    const { detailinfo, suggestList } = useRequest();
    const router = useRouter();
    const route = useRoute();
    const render1 = () => {
      console.log(detailinfo);

      return (
        <div>
          <img src={detailinfo.value.path} class="w-full h-[206px]" />
          <CardView radius={0}>
            <TitleView
              title={detailinfo.value.name}
              right={() => (
                <span class="text-[12px] text-[#FE8923]">80%农户选择</span>
              )}
            />
            <TextView>{detailinfo.value.content}</TextView>
          </CardView>
          <div
            class={
              "flex justify-between text-[#FD4D4D] text-[12px] bg-[#fff3f3] p-10"
            }
          >
            <img
              src="https://qfile.nongqibang.com/Remind%402x.png"
              class={"w-[12px] h-[12px] mt-2 mr-4"}
            />
            平台提醒您：该类产品普遍含有化学品原料，使用或贮存不当
            可能引发人身安全风险。
          </div>
        </div>
      );
    };
    const render2 = () => {
      // /H5/richMeansOfAgriculturalProduction/small/queryNum
      let data = [{ title: "", content: "" }];
      data = detailinfo.value.richHelpExplains;
      const datas = data.map((e) => {
        return {
          name: e.title,
          value: e.content,
        };
      });

      return (
        <CardView class={"!mt-[10px]"} radius={0} title="产品属性">
          <TextGroups data={datas} itemWidth="50%" class="mt-[10px]" />
        </CardView>
      );
    };
    const render5 = () => {
      let data = suggestList.value.map((e: any) => {
        return {
          name: e.name,
          img: e.path,
          scale: e.percentage,
          num: e.num,
          id: e.id,
        };
      });
      return (
        <CardMore
          radius={0}
          title="智能推荐"
          class="!mt-[10px] mb-[20px]"
          url="/farmProductsHall"
        >
          <Grid columnNum={2} gutter="10" border={true}>
            {data.map((e) => {
              console.log(e);
              return (
                <GridItem>
                  <div
                    class="w-full"
                    onClick={() => {
                      router.replace(`/farmProductDetailXh?id=${e.id}`);
                      setTimeout(() => {
                        window.location.reload();
                      }, 200);
                    }}
                  >
                    <img src={e.img} class="w-full h-[105px]" />
                    <div class="w-full h-[25px] mt-[10px] text-[#333] text-[14px]">
                      {e.name}
                    </div>
                    <div class="flex justify-between w-full mt-[20px] text-[#999] text-[12px]">
                      <div class={"text-[#FE8923]"}>￥{e.num}</div>
                      <div>{e.scale}农户选择</div>
                    </div>
                  </div>
                </GridItem>
              );
            })}
          </Grid>
        </CardMore>
      );
    };
    const render6 = () => {
      const data: IButtonGroupViewData[] = [
        {
          text: "咨询大户",
          childClass: "!h-[40px]",
          style: {
            background: "#FFFFFF",
            border: "1px solid #E6E6E6",
            width: getSize(165),
            borderRadius: getSize(25),
            height: getSize(40),
            color: "#333333",
          },
          onClick: () => {
            showFailToast("功能待开发");
          },
        },
        {
          text: "申请代购",
          childClass: "!h-[40px]",
          style: {
            width: getSize(165),
            background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
          },
          onClick: () =>
            router.push(
              `/behalfBuyApplication?productionId=${detailinfo.value.id}`
            ),
        },
      ];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px] z-50"
          style={{ boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);" }}
        >
          <ButtonGroupView data={data} />
        </div>
      );
    };
    const render4 = () => {
      const getDetailInfo = detailinfo.value.userList;
      const data1 = getDetailInfo.map((e: any) => {
        return {
          userName: e.userName,
          logo: e.logo,
          right: () => {
            return (
              <ButtonView
                onClick={() =>
                  router.push(
                    `/behalfBuyApplication?id=${e.userId}&productionId=${route.query.id}`
                  )
                }
                class="!h-[22px]"
                style={{
                  height: getSize(22) + "!important",
                  width: getSize(61) + "!important",
                }}
              >
                申请代购
              </ButtonView>
            );
          },
        };
      });
      return (
        <div class="bg-white">
          <PopTitle title="种植大户" type="left" />
          <PopupCheck data={data1} />
        </div>
      );
    };
    return () => {
      return (
        <PageTitle title="农资详情" childClass="!p-[0px] m-child-top-20">
          {render1()}
          {render2()}
          {!isDh() && detailinfo.value.userList.length > 0 && render4()}
          {render5()}
          {/* render6() */}
        </PageTitle>
      );
    };
  },
});
